<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>model_train</title>
</head>
<body>
<div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item ">
                    <a class="nav-link " href="welcome.jsp">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="model_construct_FCNN.html">模型构建</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="model_train.html">模型训练</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="model_download.html">模型下载</a>
                </li>
            </ul>
            <h5 style="height: 10px;" align="right"><a id="username" class="user"></a> &nbsp;</h5>
        </div>
    </nav>
</div>

<div id="model_select" style="height:500px;width: 50%;float: left">

    <div style="margin-left: 10px">
        模型网络：<select id="select_model" style="width: 25%">

        </select>
        模型历史参数：<select id="select_model_history" style="width: 25%">
        <option>无</option>
        </select>
    </div>

    <div id="model_pic" style="width: 100%;height: 400px;float:left;padding: 10px">
        <img id="model_pic_svg"  width="100%" height="400px" style="border: 10px black"></img>
    </div>

    <div id="train_info" align="center">
        &nbsp<br/>
        <button id="start">开始</button>
        <button id="over">停止</button>
        <button id="suspend">暂停</button>
        状态:<p id="state_info" style="position: absolute;margin-left:420px;margin-top: -28px"></p>
    </div>
</div>
<div id="model_info" style="height: 500px;width: 50%;float: left;">

    <div style="margin-left: 10px">
        模型网络：<select id="select_over_model" style="width: 25%">
        </select>
        模型历史参数：<select id="select_over_model_history" style="width: 25%">
        <option>2020-6-5_20:58</option>
        </select>
    </div>
    <div id="model_over_pic" style="width: 100%;height:400px;padding:10px;float: left;">
        <img id="model_over_pic_svg"  width="100%" height="400px" ></img>
    </div>

    <div style="text-align: right">
        &nbsp<br/>
        <a class="btn btn-default btn-lg" href="../resource/model/1.svg">
            <i class="fa fa-download fa-lg">模型数据下载</i>
        </a>


    </div>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/react-bootstrap/1.1.0-rc.0/react-bootstrap.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    var State = new Object();
    State.state = 0;
    State.change = function(x) {
        var state_info = document.getElementById("state_info");
        var start = document.getElementById("start");
        var over = document.getElementById("over");
        var suspend = document.getElementById("suspend")
        state = x;
        if(x == 0)
        {
            start.disabled = false;
            over.disabled = true;
            suspend.disabled = true;
            suspend.innerHTML="暂停";
            state_info.innerText = "stop";
            state_info.style.color = "red";
        }
        if(x == 1)
        {
            start.disabled = true;
            over.disabled = false;
            suspend.disabled = false;
            state_info.innerText = "running";
            state_info.style.color = "green";

        }
        if(x == 2)
        {
            start.disabled = true;
            over.disabled = false;
            suspend.disabled = false;
            if(suspend.innerHTML=="暂停")
            {
                suspend.innerHTML="继续";
                state_info.innerText = "suspend";
                state_info.style.color = "yellow";
            }
            else
            {
                suspend.innerHTML="暂停";
                state_info.innerText = "running";
                state_info.style.color = "green";
            }
        }

    };
    var model_list = null;
    function Download_file(sUrl) {
            //Creating new link node.
            var link = document.createElement('a');
            link.href = sUrl;

            //Dispatching click event.
            if (document.createEvent) {
                var e = document.createEvent('MouseEvents');
                e.initEvent('click', true, true);
                link.dispatchEvent(e);
            }

    };
    function getUser(ev) {
        var user = document.getElementById("username");
        var xhr = new XMLHttpRequest();
        xhr.open("POST","../GetUserName",true);
        xhr.send();
        xhr.onreadystatechange = function (ev1) {
            if(xhr.readyState==4&&xhr.status==200)
            {
                var content = xhr.responseText;
                if(content=="no,relogin")
                {
                    user.innerText = "请重新登录";
                    user.href = "login.jsp";
                }
                else
                {
                    user.innerText = content;
                    user.href = "user.html";
                }
            }

        }

    };
    window.onload = function (ev){
        getUser();
        var model_over = document.getElementById("select_over_model");
        var model = document.getElementById("select_model");
        var model_str = "";
        var xhr = new XMLHttpRequest();
        xhr.open("post","../QueryModel",true);
        xhr.send();

        xhr.onreadystatechange = function (ev1) {
            if ((xhr.readyState == 4) && (xhr.status) == 200) {
                var content = xhr.responseText;
                var str = JSON.parse(content);
                model_list = str;
                var obj = new Object();
                obj.name = "";
                obj.path = "";
                for(var i=0;i<str.length;i++)
                {
                    obj = str[i];
                    model_str += "<option value=\"";
                    model_str += i + "\">";
                    model_str += obj.name;
                    model_str += "</option>";
                }
                model.innerHTML = model_str;
                model_over.innerHTML = model_str;
            } else {

            }

        };
        document.getElementById("select_model").onchange = function()
        {
            var value = document.getElementById("select_model").value;
            var svg = document.getElementById("model_pic_svg");
            svg.src = model_list[value].path;
        };
        document.getElementById("select_over_model").onchange = function()
        {
            var value = document.getElementById("select_over_model").value;
            var svg = document.getElementById("model_over_pic_svg");
            svg.src = model_list[value].path;
        };
        var start = document.getElementById("start");
        var over = document.getElementById("over");
        var suspend = document.getElementById("suspend");
        //0:停止  1：运行 2：暂停
       start.onclick = function (ev1)
       {
           State.change(1);
       };
       over.onclick = function (ev1)
       {
           State.change(0);
       };
       suspend.onclick = function (ev1)
       {
           State.change(2);
       };
       function SetState() {
           var xhr = new XMLHttpRequest();
           xhr.open("POST","../GetState","true");
           xhr.send();
           xhr.onreadystatechange = function (ev1) {
               if(xhr.readyState==4&&xhr.status==200)
               {
                   state = xhr.responseText;
                   State.change(state);
               }
           }

       };
       SetState();
       var timer = setInterval(function () {
            SetState();
       },5000);





    }
</script>

</body>
</html>